<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>面向对象版_滑动门</title>
    <link rel="stylesheet" type="text/css" href="CSS/base.css" />
    <link rel="stylesheet" type="text/css" href="CSS/solidBox.css" />
    <script type="text/javascript" src="JS/tool.domElement.js"></script>
    <script type="text/javascript">
      //面向过程  --- > 鼠标的事件 执行函数
      // 对象   在何种情况下  何种改变
      // 第一步 获取对象
      // 第二步 绑定事件
      // 第三步 实现结果
      // function soildBox(idName) {
      //   // 第一步 获取对象
      //   var solidBox = document.getElementById(idName);
      //   var solidBox_title = solidBox.children[0].children;
      //   var solidBox_content = solidBox.children[1].children;

      //   for (let index = 0; index < solidBox_title.length; index++) {
      //     // 第二步 绑定事件
      //     solidBox_title[index].onclick = function () {
      //       // 第三步 实现结果
      //       for (let j = 0; j < solidBox_title.length; j++) {
      //         if (j == index) {
      //           solidBox_title[j].className = "hover";
      //           solidBox_content[j].style.display = "block";
      //         } else {
      //           solidBox_title[j].className = "";
      //           solidBox_content[j].style.display = "none";
      //         }
      //       }
      //     };
      //   }
      // }
      // window.onload = function () {
      //   soildBox("solidBox");
      // };

      //面向对象  --- > 选项卡

      // 属性 --- > 标题对象  内容对象
      // 方法 --- > 绑定事件的方法 显示内容标题高亮的方法
      //es5
      // function SoildBox(idName) {
      //   //console.log(solidBox);
      //   this.solidBox = document.getElementById(idName);
      //   this.solidBox_title = this.solidBox.children[0].children;
      //   this.solidBox_content = this.solidBox.children[1].children;
      //   this.initEvent();
      // }
      // SoildBox.prototype.initEvent = function () {
      //   var self = this;
      //   for (let index = 0; index < this.solidBox_title.length; index++) {
      //     this.solidBox_title[index].onclick = function () {
      //       self.show(index);
      //     };
      //   }
      // };
      // SoildBox.prototype.show = function (index) {
      //   for (let j = 0; j < this.solidBox_title.length; j++) {
      //     if (j == index) {
      //       this.solidBox_title[j].className = "hover";
      //       this.solidBox_content[j].style.display = "block";
      //     } else {
      //       this.solidBox_title[j].className = "";
      //       this.solidBox_content[j].style.display = "none";
      //     }
      //   }
      // };

      // window.onload = function () {
      //   var solidBox = new SoildBox("solidBox");
      // };

      //es6
      class SoildBox {
        constructor(idName) {
          this.solidBox = document.getElementById(idName);
          // 获取strong集合
          this.solidBox_title = this.solidBox.children[0].children;
          // 获取div内容集合
          this.solidBox_content = this.solidBox.children[1].children;
          //初始化事件
          this.initEvent();
        }
        initEvent() {
          for (let index = 0; index < this.solidBox_title.length; index++) {
            this.solidBox_title[index].onclick = () => {
              this.show(index);
            };
          }
        }
        show(index) {
          for (let j = 0; j < this.solidBox_title.length; j++) {
            if (j == index) {
              this.solidBox_title[j].className = "hover";
              this.solidBox_content[j].style.display = "block";
            } else {
              this.solidBox_title[j].className = "";
              this.solidBox_content[j].style.display = "none";
            }
            
          }
        }
      }

      class SoildBox_lv2 extends SoildBox{
        constructor(idName){
          super(idName);
        }
        show(){
            
        }
      }

      window.onload = function () {
        new SoildBox("solidBox");
        new SoildBox("solidBox1");
        new SoildBox_lv2("solidBox2");
      };
    </script>
  </head>

  <body>
    <!--第1个盒子-->
    <div id="solidBox" class="solidBox">
      <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
      </h3>
      <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
      </div>
    </div>
    <!--第1个盒子-->
    <div id="solidBox1" class="solidBox">
      <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
      </h3>
      <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
      </div>
    </div>


  </body>
</html>
